<template>
<div>
    <el-dialog title="职位修改" :visible.sync="dialogFormVisible">
      <el-form ref="position-edit-form" :model="form" :rules="rules">
        <el-form-item label="公司LOGO" :label-width="formLabelWidth" prop="companyLogo">
          <Upload 
            ref="upload" 
            :uploded-succ.sync="uploadSucc"
            :is-change.sync="isUploadFile"
            :file-name="form.companyLogo"
          ></Upload>
        </el-form-item>
        <el-form-item label="公司名称" :label-width="formLabelWidth" prop="companyName">
          <el-input v-model="form.companyName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职位名称" :label-width="formLabelWidth" prop="positionName">
          <el-input v-model="form.positionName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在城市" :label-width="formLabelWidth" prop="city">
          <el-input v-model="form.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="岗位薪资" :label-width="formLabelWidth" prop="salary">
          <el-input v-model="form.salary" autocomplete="off"></el-input>
        </el-form-item>
        <el-input v-model="form.companyLogo_old" autocomplete="off" type="hidden"></el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- <form method="post" action="http://localhost:3000/api/positions/test">
      <input type="text" name="username" username="abc">
      <input type="text" name="hidden" value="hidden" v-if="false">
      <input type="submit" value="submit">
    </form> -->
</div>
</template>

<script>
import Upload from './Upload'
import { add, listone, update } from '@/api/positions'
export default {
  props: {
    posId: {
      type: String
    }
  },

  components: {
    Upload
  },
  
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      isUploadFile: false,
      uploadSucc: null,

      form: {
        companyName: '',
        positionName: '',
        city: '',
        salary: '',
        companyLogo_old: ''
      },

      rules: {
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        positionName: [
          { required: true, message: '请输入职位名称', trigger: 'blur' },
        ],
        city: [
          { required: true, message: '请输入入职城市', trigger: 'blur' },
        ],
        salary: [
          { required: true, message: '请输入职位薪资', trigger: 'blur' },
        ],
      }
    }
  },

  async mounted() {
    
  },

  methods: {
    handleCancel() {
      this.dialogFormVisible = false
    },

    handleSubmit() {
      if (!this.isUploadFile && this.$refs['upload'].fileList.length === 0) {
        this.$message('请选择文件');
      } else if (!this.isUploadFile && this.$refs['upload'].fileList.length > 0) {
        this.submitForm({
          file: this.form.companyLogo_old
        })
      } else {
        this.$refs['upload'].submitUpload()
      }
    },

    submitForm({file}) {
      this.$refs['position-edit-form'].validate(async (valid) => {
        if (valid) {
          let data = {
            ...this.form,
            companyLogo: file
          }
          console.log(data)
          let result = await update(data)

          this.$refs['position-edit-form'].resetFields()
          this.$refs['upload'].fileList = []
          this.$parent.posId = '0'
          this.$parent.loadData()
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    }
  },

  watch: {
    uploadSucc(msg) {
      // step2: 表单提交
      if (msg.ret) {
        this.submitForm(msg.data)
      } else {
        console.log(msg.data.message)
      }
    },

    async posId(value) {
      console.log(value)
      let result = await listone({
        id: value
      })
      this.form = {
        ...result.data,
        companyLogo_old: result.data.companyLogo
      }
    }
  }
}


</script>

<style lang='stylus' scoped>

</style>